<template>
    <el-menu class="left-menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
        <el-menu-item v-for="route in routes" :key="route.path" :index="route.path" @click="navigateTo(route.path)">
            <span>{{ route.name }}</span>
        </el-menu-item>
    </el-menu>
</template>
<script>
export default {
    props: {
        routes: Array,
    },
    data() {
        return {
            isCollapse: false,
        }
    },
    methods: {
        navigateTo(path) {
            this.$router.push(path);
        },
        handleOpen() { },
        handleClose() { }
    },
}
</script>
<style scoped>
.left-menu {
    width: 180px;
    height: 100%;
}
</style>